<script setup lang="ts">
import { useTemplateRef } from 'vue';
import {
  useEquipmentPanel,
  usePlayerAttributes,
} from '../../../../composables';
import { useBattleLevel } from '../../../../composables/use-battle-level';
import { EQUIP_SLOT, type EquipSlot } from '../../../../game/data/item/type';
import { ATTRIBUTE_TYPE_ORDER } from '../../../../game/model/attributes/type';
import { AttributesReader } from '../../../../game/systems/attributes/reader';
import { ItemReader } from '../../../../game/systems/item/reader';
import VProgress from '../../components/progress.vue';
import EquipmentSlot from '../components/slot.vue';
import EquipmentSlotDetail from './detail.vue';

const equipmentSlotDetailRef = useTemplateRef('equipmentSlotDetailRef');

const { state: playerAttributesState } = usePlayerAttributes();
const { state: battleLevelState } = useBattleLevel();
const { state: equipmentPanelState } = useEquipmentPanel();

// 装备槽配置数据
const slotConfigs = [
  { slot: EQUIP_SLOT.WEAPON, position: 'left' },
  { slot: EQUIP_SLOT.HEAD, position: 'left' },
  { slot: EQUIP_SLOT.BODY, position: 'left' },
  { slot: EQUIP_SLOT.BELT, position: 'left' },
  { slot: EQUIP_SLOT.SHOES, position: 'left' },
  { slot: EQUIP_SLOT.WRIST, position: 'right' },
  { slot: EQUIP_SLOT.BEAD, position: 'right' },
  { slot: EQUIP_SLOT.NECKLACE, position: 'right' },
  { slot: EQUIP_SLOT.MAGICAL_INSTRUMENT, position: 'right' },
  { slot: EQUIP_SLOT.TREASURE, position: 'right' },
];

const leftSlots = slotConfigs.filter((config) => config.position === 'left');
const rightSlots = slotConfigs.filter((config) => config.position === 'right');

const attributeConfigs = ATTRIBUTE_TYPE_ORDER.map((type) => ({
  type,
  label: AttributesReader.getAttributeName(type),
}));

function onSlotClick(slotType: EquipSlot) {
  if (!equipmentPanelState.value.slots[slotType]) return;
  equipmentSlotDetailRef.value?.show(equipmentPanelState.value.slots[slotType]);
}
</script>

<template>
  <div class="p-2 flex gap-4">
    <!-- 左侧装备槽 -->
    <div class="flex-none flex flex-col gap-2">
      <equipment-slot
        v-for="config in leftSlots"
        :key="config.slot"
        :equipment="equipmentPanelState.slots[config.slot]"
        :equipment-config="equipmentPanelState.slotsConfig[config.slot]"
        @click="onSlotClick(config.slot)"
      >
        <div v-if="equipmentPanelState.slotsConfig[config.slot]">
          {{ equipmentPanelState.slotsConfig[config.slot]?.name }}
        </div>
        <div v-else>{{ ItemReader.getEquipSlotName(config.slot) }}</div>
      </equipment-slot>
    </div>

    <!-- 中间属性面板 -->
    <div class="flex-1 flex flex-col gap-1">
      <div class="flex-1 overflow-auto">
        <div class="grid grid-cols-2">
          <div
            v-for="attr in attributeConfigs"
            :key="attr.type"
            class="flex-1 flex items-center"
          >
            <span>{{ attr.label }}：</span>
            <span>
              {{ Math.floor(playerAttributesState.final[attr.type]) }}
            </span>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center">
          <span>战斗等级：</span>
          <span>{{ battleLevelState.levelInfo.level }}</span>
        </div>
        <div class="flex items-center">
          <span>战斗经验：</span>
          <span>
            {{ battleLevelState.levelInfo.currentLevelExp }}/{{
              battleLevelState.levelInfo.currentLevelRequiredExp
            }}
          </span>
        </div>
        <div>
          <v-progress
            :value="battleLevelState.levelInfo.currentLevelExp"
            :max="battleLevelState.levelInfo.currentLevelRequiredExp"
            :rounded="true"
            size="mini"
          ></v-progress>
        </div>
      </div>
    </div>

    <!-- 右侧装备槽 -->
    <div class="flex-none flex flex-col gap-2">
      <equipment-slot
        v-for="config in rightSlots"
        :key="config.slot"
        :equipment="equipmentPanelState.slots[config.slot]"
        :equipment-config="equipmentPanelState.slotsConfig[config.slot]"
        @click="onSlotClick(config.slot)"
      >
        <div v-if="equipmentPanelState.slotsConfig[config.slot]">
          {{ equipmentPanelState.slotsConfig[config.slot]?.name }}
        </div>
        <div v-else>{{ ItemReader.getEquipSlotName(config.slot) }}</div>
      </equipment-slot>
    </div>
    <equipment-slot-detail ref="equipmentSlotDetailRef"></equipment-slot-detail>
  </div>
</template>
